import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Button } from '@weubi/ui';
import { ArrowLeftIcon, PlayIcon, PauseIcon } from '@heroicons/react/24/outline';

const TaskDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  // 模拟任务数据
  const task = {
    id: id || '1',
    name: '示例爬虫任务',
    url: 'https://example.com',
    status: 'completed' as const,
    createdAt: '2024-01-15T10:00:00Z',
    lastRun: '2024-01-15T14:30:00Z',
    description: '这是一个示例爬虫任务，用于演示任务详情页面的功能。',
    config: {
      interval: 3600,
      timeout: 30000,
      retries: 3
    },
    stats: {
      totalRuns: 25,
      successRuns: 23,
      failedRuns: 2,
      avgDuration: 1250
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'pending':
        return 'text-yellow-600 bg-yellow-100';
      case 'running':
        return 'text-blue-600 bg-blue-100';
      case 'completed':
        return 'text-green-600 bg-green-100';
      case 'failed':
        return 'text-red-600 bg-red-100';
      default:
        return 'text-gray-600 bg-gray-100';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'pending':
        return '等待中';
      case 'running':
        return '运行中';
      case 'completed':
        return '已完成';
      case 'failed':
        return '失败';
      default:
        return '未知';
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button
          variant="outline"
          onClick={() => navigate('/tasks')}
          className="flex items-center gap-2"
        >
          <ArrowLeftIcon className="h-4 w-4" />
          返回任务列表
        </Button>
        <h1 className="text-2xl font-bold text-gray-900">{task.name}</h1>
        <span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(task.status)}`}>
          {getStatusText(task.status)}
        </span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card title="任务信息" className="p-6">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  目标URL
                </label>
                <p className="text-gray-900">{task.url}</p>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  描述
                </label>
                <p className="text-gray-900">{task.description}</p>
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    创建时间
                  </label>
                  <p className="text-gray-900">
                    {new Date(task.createdAt).toLocaleString('zh-CN')}
                  </p>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    最后运行
                  </label>
                  <p className="text-gray-900">
                    {task.lastRun ? new Date(task.lastRun).toLocaleString('zh-CN') : '从未运行'}
                  </p>
                </div>
              </div>
            </div>
          </Card>

          <Card title="配置信息" className="p-6">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  运行间隔
                </label>
                <p className="text-gray-900">{task.config.interval / 60} 分钟</p>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  超时时间
                </label>
                <p className="text-gray-900">{task.config.timeout / 1000} 秒</p>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  重试次数
                </label>
                <p className="text-gray-900">{task.config.retries} 次</p>
              </div>
            </div>
          </Card>
        </div>

        <div className="space-y-6">
          <Card title="操作" className="p-6">
            <div className="space-y-3">
              <Button className="w-full flex items-center justify-center gap-2">
                <PlayIcon className="h-4 w-4" />
                立即运行
              </Button>
              
              <Button variant="outline" className="w-full">
                编辑任务
              </Button>
              
              <Button variant="outline" className="w-full text-red-600 hover:text-red-700">
                删除任务
              </Button>
            </div>
          </Card>

          <Card title="运行统计" className="p-6">
            <div className="space-y-4">
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">总运行次数</span>
                <span className="font-medium">{task.stats.totalRuns}</span>
              </div>
              
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">成功次数</span>
                <span className="font-medium text-green-600">{task.stats.successRuns}</span>
              </div>
              
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">失败次数</span>
                <span className="font-medium text-red-600">{task.stats.failedRuns}</span>
              </div>
              
              <div className="flex justify-between">
                <span className="text-sm text-gray-600">平均耗时</span>
                <span className="font-medium">{(task.stats.avgDuration / 1000).toFixed(1)}s</span>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default TaskDetailPage;
